import React, { useState } from 'react'
import { useSelector } from 'react-redux'
import { Card, Image, Button, Toast, Space } from 'react-vant'
import Poput from '../../components/Poput'

export default function Tuijian() {

    let obj = useSelector((state: any) => state.crms1)
    //console.log(obj);

    //控制弹出层的显示隐藏
    const [visible, setVisible] = useState(false)
    //显示对应的详情页数据
    const [itemobj, setItemobj] = useState({})

    return (
        <div>
            {/* 商品卡片 */}
            <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', padding: '10px' }}>
                {
                    obj.shoplist.map((item: any,index) => {
                        return <div key={index} onClick={() => {
                            setVisible(true)
                            setItemobj(item)
                        }}>
                            <Card round >
                                <Card.Cover>
                                    <Image src={item.img} width={150} height={180} />
                                </Card.Cover>
                                <Card.Header
                                >
                                    名称:{item.title}
                                </Card.Header>
                                <Card.Body>
                                    价格:{item.price}
                                </Card.Body>
                            </Card>

                        </div>
                    })
                }

            </div>

            {/* 弹出层 */}
            <Poput visible={visible} itemobj={itemobj} setVisible={setVisible}></Poput>
        </div>
    )
}
